<template>
	<view>
		<myhead left="1" txt="添加商户"></myhead>
		<view class="inputList">
		    <view class="title" style="margin-top: 3vw;">商户名称</view>
		    <input placeholder="请输入商户名称" v-model="name" class="radius"></input>
		</view>
		<view class="inputList">
		    <view class="title">选择类型</view>
		    <input placeholder="选择类型" v-model="stateTxt1" @tap="xzBtn1" disabled="disabled"></input>
		</view>
		<checkbox-group @change="checkboxChange" class="Remarks">
			<label class="Remarkslabel" v-for="item in list" :key="item.value">
				<view>
					<checkbox :value="item.value" :checked="item.checked" />
				</view>
				<view>{{item.name}}</view>
			</label>
		</checkbox-group>
		<view class="btn" @tap='btn'>
			提交
		</view>
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				name:null,
				stateTxt1:null,
				state:null,
				list:'',
				values:null
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			http.get('/api/merchant/getRemarks').then(res => {
				//console.log(res)
				if (res.code == 200 && res.result) {
					this.list=res.result
				}
				uni.hideLoading();
			})
		},
		methods: {
			xzBtn1:function(){
				let that=this
				uni.showActionSheet({
				    itemList: ['成功', '失败'],
				    success: function (res) {
				        //console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						that.state=res.tapIndex
						if(res.tapIndex==0){
							that.stateTxt1='成功'
						}
						if(res.tapIndex==1){
							that.stateTxt1='失败'
						}
						console.log(that.state)
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			checkboxChange: function (e) {
				var items = this.list,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				//console.log(values)
				this.values=values
			},
			btn:function(){
				if(!this.name){
					uni.showToast({
					  title: '请输入名称',
					  icon: 'none'
					});
					return false
				}
				if(this.state==null){
					uni.showToast({
					  title: '请选择类型',
					  icon: 'none'
					});
					return false
				}
				uni.showLoading({
				    title: '加载中'
				});
				http.post('/api/merchant/addMerchant',{name:this.name,status:this.state,remarkList:this.values}).then(res => {
					//console.log(res)
					if (res.code == 200) {
						uni.navigateBack({
						    delta: 1
						});
					}
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style>
	.inputList{
		padding: 0 3vw;
		margin-bottom: 6vw;
	}
	.inputList .title{
		margin-bottom: 2vw;
		font-size: 3.6vw;
		color: #999999;
	}
	.inputList input{
		height: 12vw;
		line-height: 12vw;
		border-bottom: 1px solid #F2F2F2;
	}
	.Remarks{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 3vw;
	}
	.Remarkslabel{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 3vw;
		font-size: 3.2vw;
	}
	.btn{
		width: 84%;
		padding: 4vw 0;
		font-size: 3.5vw;
		border-radius: 1.8vw;
		background-image: linear-gradient(45deg, #24EBA9, #10C7B2);
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 20vw;
	}
</style>
